<template>
  <div class="tags-page">
    <div class="content-layout">
      <main class="main-content">
        <div class="content-card">
          <div class="page-header">
            <h1>标签云</h1>
            <p class="subtitle">共 {{ tags.length }} 个标签</p>
          </div>

          <div class="tags-cloud" ref="tagsCloud">
            <div 
              v-for="tag in tags" 
              :key="`tag-${tag.name}`"
              class="tag-item"
              :class="{ active: activeTag === tag.name }"
              @click="selectTag(tag.name,tag.id)"
            >
              <i class="fas fa-tag"></i>
              <span class="tag-name">{{ tag.name }}</span>
              <span class="tag-count">{{ tag.articleNum }}</span>
            </div>
          </div>

          <div v-if="activeTag" class="tag-posts" ref="postsSection">
            <div class="tag-header">
              <h2>
                <i class="fas fa-bookmark"></i>
                {{ activeTag }}
                <span class="post-count">{{ totatlCount }} 篇文章</span>
              </h2>
            </div>
            
            <ArticleList
              :articles="selectedTagPosts"
              :loading="loading"
              :total="total"
              :current="query.pageNum"
              @article-click="goToPost"
              @page-change="changePage"
            />
          </div>
        </div>
      </main>
      <Sidebar />
    </div>
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList/index.vue'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'
import Sidebar from '@/components/Sidebar/index.vue'
import { getTagsApi } from '@/api/tags'
import { getArticlesApi } from '@/api/article'
gsap.registerPlugin(ScrollTrigger)

export default {
  name: 'Tags',
  components: {
    ArticleList,
    Sidebar
  },
  data() {
    return {
      activeTag: null,
      tags:[],
      selectedTagPosts:[],
      total:0,
      totatlCount:0,
      loading:false,
      query:{
        pageNum:1,
        pageSize:10,
        tagId:null
      }
    }
  },
  methods: {
    /**
     * 跳转文章
     */
    goToPost(id) {
      this.$router.push(`/post/${id}`)
    },
    /**
     * 选择标签
     */
    async selectTag(tagName,tagId) {
      if(this.activeTag === tagName){
        return
      }
      this.activeTag = this.activeTag === tagName ? null : tagName
      this.query.tagId = tagId
      this.query.pageNum = 1
      this.getArticleList()
    },
    /**
     * 切换页码
     */
    changePage(pageNum) {
      this.query.pageNum = pageNum
      this.getArticleList()
      window.scrollTo({
        top: this.$refs.postsSection?.offsetTop - 80,
        behavior: 'smooth'
      })
    },
    /**
     * 获取文章列表
     */
    async getArticleList() {
      const res = await getArticlesApi(this.query)
      this.selectedTagPosts = res.data.records
      this.total = res.data.pages
      this.totatlCount = res.data.total
    },
    /**
     * 初始化动画
     */
    initAnimations() {
      this.$nextTick(() => {
        if (this.$refs.tagsCloud && this.$refs.tagsCloud.children.length) {
          gsap.from(this.$refs.tagsCloud.children, {
            opacity: 0,
            y: 30,
            scale: 0.9,
            duration: 0.6,
            stagger: {
              amount: 1,
              from: "random"
            },
            ease: "back.out(1.4)",
            scrollTrigger: {
              trigger: this.$refs.tagsCloud,
              start: "top bottom-=100",
            }
          });
        }

        gsap.from('.page-header h1', {
          opacity: 0,
          y: -30,
          duration: 1,
          ease: "elastic.out(1, 0.8)"
        });
      });
    }
  },
  async created() {
    const res = await getTagsApi()
    this.tags = res.data

    if(this.$route.query.tagId){
      this.query.tagId = this.$route.query.tagId
      this.activeTag = this.$route.query.tagName
      this.selectTag(this.activeTag,this.query.tagId)
    }else{
      if (this.tags.length) {
        const randomTag = this.tags[0]
        this.selectTag(randomTag.name, randomTag.id)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initAnimations();
    });
  }
}
</script>

<style lang="scss" scoped>
.tags-page {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: $spacing-xl * 1.5;
  text-align: center;
  
  h1 {
    font-size: 2.8em;
    background: linear-gradient(120deg, $primary, adjust-hue($primary, 60deg));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: $spacing-xs;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .subtitle {
    color: var(--text-secondary);
    font-size: 1.2em;
    letter-spacing: 0.5px;
    animation: fadeIn 0.8s ease-out;
  }
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: $spacing-md * 2;
  padding: $spacing-lg;
  min-height: calc(100vh - 80px);
  align-items: start;
  
  @include responsive(lg) {
    grid-template-columns: 1fr;
    padding: $spacing-lg;
  }
}

.content-card {
  border-radius: $border-radius-lg;
  padding: $spacing-xl;
  background: var(--card-bg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba($primary, 0.1);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: $spacing-sm;
  margin-bottom: $spacing-xl;
  padding-bottom: $spacing-lg;
  border-bottom: 2px solid var(--border-color);

  .tag-item {
    padding: $spacing-sm $spacing-md;
    border-radius: $border-radius-lg;
    background: var(--hover-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    font-size: 0.95em;
    border: 1px solid transparent;
    backdrop-filter: blur(8px);
    border: 1px solid rgba($primary, 0.1);

    i {
      font-size: 0.85em;
      opacity: 0.7;
    }

    .tag-count {
      font-size: 0.85em;
      color: var(--text-secondary);
      background: rgba($primary, 0.1);
      padding: 2px 8px;
      border-radius: $border-radius-lg;
      transition: all 0.3s ease;
    }

    &:hover {
      transform: translateY(-3px) scale(1.05);
      border-color: rgba($primary, 0.4);
      box-shadow: 0 6px 16px rgba($primary, 0.15);
    }

    &.active {
      background: linear-gradient(120deg, $primary, adjust-hue($primary, 60deg));
      box-shadow: 0 4px 15px rgba($primary, 0.3);
      transform: translateY(-2px);
      
      .tag-count {
        background: rgba(white, 0.25);
        backdrop-filter: blur(4px);
      }
    }
  }
}

.tag-header {
  margin-bottom: $spacing-xl;
  padding-bottom: $spacing-sm;
  border-bottom: 2px solid rgba($primary, 0.1);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 2px;
    background: linear-gradient(45deg, $primary, adjust-hue($primary, 40deg));
    border-radius: $border-radius-sm;
  }

  h2 {
    font-size: 1.5em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: $spacing-sm;

    i {
      color: $primary;
      font-size: 0.9em;
    }

    .post-count {
      font-size: 0.6em;
      color: var(--text-secondary);
      margin-left: auto;
      padding: $spacing-xs $spacing-md;
      background: linear-gradient(120deg, rgba($primary, 0.1), rgba(adjust-hue($primary, 60deg), 0.1));
      backdrop-filter: blur(4px);
      border: 1px solid rgba($primary, 0.1);
      transition: all 0.3s ease;
      border-radius: $border-radius-lg;
      letter-spacing: 0.5px;

      &:hover {
        border-color: rgba($primary, 0.3);
        transform: translateY(-1px);
      }
    }
  }
}

.post-item {
  display: flex;
  align-items: center;
  gap: $spacing-xl;
  padding: $spacing-md;
  border-radius: $border-radius-md;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: var(--hover-bg);
    transform: translateX(10px);

    .post-date {
      border-color: $primary;
      background: rgba($primary, 0.1);
    }
  }

  .post-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: $spacing-xs;
    border: 1px solid var(--border-color);
    border-radius: $border-radius-sm;
    transition: all 0.3s ease;
    min-width: 60px;

    .month {
      font-size: 0.9em;
      color: var(--text-secondary);
    }

    .day {
      font-size: 1.2em;
      font-weight: 600;
      color: var(--text-primary);
    }
  }

  .post-info {
    flex: 1;
    min-width: 0;

    .post-title {
      color: var(--text-primary);
      font-size: 1em;
      margin-bottom: 0;
      transition: color 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        color: $primary;
      }
    }
  }
}

@include responsive(sm) {
  .content-card {
    padding: $spacing-md;
    border-radius: 0;
    margin: -$spacing-md;
  }

  .post-item {
    gap: $spacing-md;

    .post-date {
      min-width: 50px;
    }
  }

  .tags-cloud {
    margin: -$spacing-md;
    margin-bottom: $spacing-md;
    padding: $spacing-sm;
    
    .tag-item {
      padding: $spacing-xs $spacing-sm;
      font-size: 0.85em;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 